<template>
  <el-menu
    default-active="1"
    class="aside-menu"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    router
  >
  <div class="aside-titile">
    <img src="@/assets/images/logo.png" alt="logo" class="aside-logo">
    <b style="color: white; margin-left: 5px" >语音管理系统</b>
  </div>
  <div style="display: flex;flex-direction: column;align-items: center;">
    
    <el-menu-item index="/home">
   <el-icon><document /></el-icon>
      <span>主页显示</span>
    </el-menu-item>
    
    <el-menu-item index="/voiceRecognition">
      <el-icon><microphone /></el-icon>
      <span>语音识别</span>
    </el-menu-item>
    
    <el-menu-item index="/userManagement">
      <el-icon><user /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    
    <el-menu-item index="/voiceManagement">
      <el-icon><list /></el-icon>
      <span>语音管理</span>
    </el-menu-item>
      </div>
      </el-menu>
</template>

<script setup>
import { Microphone, User, Document ,List} from '@element-plus/icons-vue';
</script>

<style scoped>
.aside-menu {
  min-height:100%;
  min-width: 15%;

}

.aside-titile{
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.aside-logo{
  width:20px;
  position:relative;
  top:5px;
}

</style>